﻿@page "/chart/area"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart'>Blazor Area Chart</a> example visualizes the data about average sales comparison of two products by using default area series in the chart. Legend in the sample shows the information about the series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how the area type chart can be rendered and configured. It is similar to the line type chart, which represents time-dependent data and shows trends at equal intervals, but the area is closed and filled with the color of the series. Also, the legend is enabled with the shape of the series type.</p>
    <p>More information about the area series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/area'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Average Sales Comparison" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Revenue (in Million)" Interval="1" LabelFormat="{value}M">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Product A" XName="Period" Width="2"
                         Opacity="0.5" YName="ProductA_Revenue" Type="ChartSeriesType.Area">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Product B" XName="Period" Width="2"
                         Opacity="0.5" YName="ProductB_Revenue" Type="ChartSeriesType.Area">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<AreaChartData> ChartPoints { get; set; } = new List<AreaChartData>
    {
        new AreaChartData { Period = new DateTime(2000, 01, 01), ProductA_Revenue = 4,  ProductB_Revenue = 2.6 },
        new AreaChartData { Period = new DateTime(2001, 01, 01), ProductA_Revenue = 3.0, ProductB_Revenue = 2.8 },
        new AreaChartData { Period = new DateTime(2002, 01, 01), ProductA_Revenue = 3.8, ProductB_Revenue = 2.6 },
        new AreaChartData { Period = new DateTime(2003, 01, 01), ProductA_Revenue = 3.4, ProductB_Revenue = 3 },
        new AreaChartData { Period = new DateTime(2004, 01, 01), ProductA_Revenue = 3.2, ProductB_Revenue = 3.6 },
        new AreaChartData { Period = new DateTime(2005, 01, 01), ProductA_Revenue = 3.9, ProductB_Revenue = 3 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class AreaChartData
    {
        public DateTime Period { get; set; }
        public double ProductA_Revenue { get; set; }
        public double ProductB_Revenue { get; set; }
    }
}
